<template>
    <div>
<Row class="toolBar" justify="space-between">
            <i-col span="12">
                <Tooltip  content="查看详细" placement="bottom-start" transfer>
                    <Button type="ghost" >
                        <Icon type="clipboard"></Icon>
                    </Button>
                </Tooltip>
            </i-col>
            <i-col span="12">
                <Button-group style="float: right;">
                    <Tooltip content="刷新" placement="bottom-start" transfer>
                        <Button type="ghost" @click="refresh">
                            <Icon type="loop"></Icon>
                        </Button>
                    </Tooltip>
                    <Tooltip content="导出全部数据" placement="bottom-start" transfer>
                        <Button type="ghost" @click="exportData(1)">
                            <Icon type="arrow-down-a"></Icon>
                        </Button>
                    </Tooltip>
                    <Tooltip content="导出当前页数据" placement="bottom-start" transfer>
                        <Button type="ghost" @click="exportData(2)">
                            <Icon type="ios-download-outline"></Icon>
                        </Button>
                    </Tooltip>
                    </Button-group>
            </i-col>
        </Row>
        <i-table ref="table" border :columns="column" :data="dataAll" :loading="loading"></i-table>
    </div>
</template>

<script>
import { timeFormat } from "@/common/filter";
export default {
  name: "payitem",
  data() {
    return {
      column: [
        {
          type: "index",
          width: 60,
          align: "center",
          title: "排序"
        },
        {
          title: "负责人",
          key: "Creater"
        },
        {
          title: "订单创建时间",
          key: "Ctime",
          render: (h, params) => {
            return h("div", [h("strong", timeFormat(params.row.Ctime))]);
          }
        },
        {
          title: "应付款时间",
          key: "Date",
          render: (h, params) => {
            return h("div", [h("strong", timeFormat(params.row.Date))]);
          }
        },
        {
          title: "金额",
          key: "Money",
          render: (h, params) => {
            return h("div", [h("strong", "￥" + params.row.Money)]);
          }
        },
        {
          title: "当前状态",
          key: "Status",
          render: (h, { row }) => {
            let color = row.Status == 1 ? "yellow" : "green";
            let str = row.Status == 1 ? "未付款" : "已付款";
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: color
                }
              },
              str
            );
          }
        },
        {
          title: "备注",
          key: "Remark"
        },
        {
          title: "操作",
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "info",
                  size: "small",
                  disabled: params.row.Status == 1 ? false : true
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: () => {
                    this.itempay(params.row.Id);
                  }
                }
              },
              "付款"
            );
          }
        }
      ],
      dataAll: [],
      loading: false
    };
  },
  computed: {
    buyId() {
      return this.$route.params.BusyId;
    }
  },
  methods: {
    getAll() {
      let data = {
        buyId: this.buyId
      };
      this.loading = true;
      this.$api.getPayItemByBusyId(data).then(res => {
        if (!res.error) {
          this.dataAll = res.Data;
        } else {
          this.$Message.error(res.message);
        }
        this.loading = false;
      });
    },
    exportData(type) {
      if (type === 1) {
        this.$refs.table.exportCsv({
          filename: "原始数据",
          quoted: true
          //            columns: this.columns.filter((col, index) => index < 5),
          //            data: this.thisTableData,
        });
      } else if (type === 2) {
        this.$refs.table.exportCsv({
          filename: "排序和过滤后的数据",
          original: false,
          quoted: true
        });
      }
    },
    refresh() {
      this.getAll();
    },
    itempay(id) {
      let data = {
        id
      };
      this.$api.itempay(data).then(res => {
        if (!res.error) {
          // this.dataAll = res.Data
          this.$Message.success("付款成功！");
          this.getAll();
        } else {
          this.$Message.error(res.message);
        }
      });
    }
  },
  mounted() {
    this.getAll();
  }
};
</script>

<style scoped>
.toolBar {
  margin-bottom: 10px;
}

.ivu-dropdown {
  margin: 0px;
}

.tCheck {
  padding-left: 10px;
  float: left;
  clear: left;
  z-index: 9999;
}
</style>